<template>
	<view class="page">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="navbar-content">
				<view class="back-button" @click="goBack">
					<uni-icons type="back" size="30" color="#ffff"></uni-icons>
				</view>
				<text class="navbar-title">确认订单</text>
			</view>
		</view>
		
		<!-- 蓝色背景 -->
		<view class="blue-background"></view>
		
		<!-- 主内容容器 -->
		<view class="main-content">
			<!-- 整体内容卡片 -->
			<view class="content-card">
				<!-- 顶部进度条背景 -->
				<view class="progress-background">
					<image class="progress-bg-image" src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/矩形 4 拷贝 2.png" mode="aspectFill"></image>
					<view class="progress-overlay">
						<view class="progress-steps">
							<view class="step-item active">
								<view class="step-circle blue">
									<text class="step-text">预约\n服务</text>
								</view>
							</view>
							<view class="step-line"></view>
							<view class="step-item active">
								<view class="step-circle green">
									<text class="step-text">支付\n订单</text>
								</view>
							</view>
							<view class="step-line"></view>
							<view class="step-item">
								<view class="step-circle orange">
									<text class="step-text">门店\n服务</text>
								</view>
							</view>
						</view>
					</view>
					<view class="progress-divider"></view>
				</view>
				<!-- 商家信息 -->
				<view class="shop-info">
					<view class="shop-header">
						<image class="shop-icon" src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/商家.png" mode="aspectFit"></image>
						<text class="shop-name">伟业汽车美容店 (人民路店)</text>
					</view>
					<text class="shop-address">山阳区人民中路33号</text>
				</view>
				
				<!-- 客户和车辆信息 -->
				<view class="customer-vehicle-info">
					<view class="info-row">
						<image class="info-icon" src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/人员.png" mode="aspectFit"></image>
						<text class="info-label">张先生</text>
						<text class="info-value">18656894566</text>
					</view>
					<view class="info-row" @click="goToAddVehicle">
						<image class="info-icon" style="margin-top: 20rpx;" src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/车辆-01.png" mode="aspectFit"></image>
						<text class="info-label" style="margin-top: 20rpx;">奔驰FWE4/豫A56487</text>
						<image class="arrow-icon" style="margin-top: 20rpx;" src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/收起箭头小 拷贝.png" mode="aspectFit"></image>
					</view>
				</view>
				
				<!-- 服务产品 -->
				<view class="service-products">
					<view class="section-header">
						<text class="section-title">服务产品</text>
						<text class="product-count">共选择<text class="count-number">1</text>项服务产品</text>
					</view>
					<view class="product-item">
						<text class="product-name">精洗汽车</text>
						<text class="product-price">¥39.9</text>
					</view>
				</view>
				
				<!-- 代金券/优惠券 -->
				<view class="coupon-section">
					<view class="coupon-row" @click="goToCouponCenter">
						<image class="coupon-icon" src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/优惠券.png" mode="aspectFit"></image>
						<text class="coupon-label">代金券/优惠券</text>
						<text class="coupon-discount">-10元</text>
						<image class="arrow-icon" src="/static/车联网服务-01专业洗车-03洗车-确认订单_slices/收起箭头小 拷贝.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="contact-service" @click="contactService">
				<image class="service-icon" src="/static/客服.png" mode="aspectFit"></image>
				<text class="service-text">联系客服</text>
			</view>
			<view class="total-amount">
				<text class="total-label">合计: </text>
				<text class="total-price">¥39.9</text>
			</view>
			<view class="submit-button" @click="submitOrder">
				<text class="submit-text">提交订单</text>
			</view>
		</view>
		
		<!-- 联系客服弹出框 -->
		<view v-if="showContactModal" class="contact-modal" @click="closeContactModal">
			<view class="modal-content" @click.stop>
				<view class="phone-section">
					<text class="phone-number">{{ phoneNumber }}</text>
				</view>
				<view class="divider"></view>
				<view class="copy-section" @click="copyPhoneNumber">
					<text class="copy-text">复制</text>
				</view>
				<view class="divider"></view>
				<view class="cancel-section" @click="closeContactModal">
					<text class="cancel-text">取消拨号</text>
				</view>
			</view>
		</view>
		
		<!-- 支付密码输入弹出框 - 已注释 -->
		<!-- <view v-if="showPaymentModal" class="payment-modal" @click="closePaymentModal">
			<view class="payment-content" @click.stop>
				<view class="payment-header">
					<view class="close-btn" @click="closePaymentModal">
						<text class="close-icon">×</text>
					</view>
					<text class="payment-title">请输入支付密码</text>
				</view>
				<view class="payment-details">
					<text class="platform-name">车辆服务平台</text>
					<text class="payment-amount">¥ 39.90</text>
				</view>
				<view class="payment-divider"></view>
				<view class="payment-method">
					<text class="method-label">支付方式</text>
					<view class="method-option">
						<text class="method-text">零钱</text>
						<text class="arrow-icon">></text>
					</view>
				</view>
				<view class="password-input">
					<input 
						ref="passwordInput"
						class="password-field" 
						type="number" 
						v-model="password" 
						:maxlength="6"
						@input="onPasswordInput"
						placeholder=""
						@focus="onPasswordFocus"
						@blur="onPasswordBlur"
					/>
					<view class="password-dots" @click="focusPassword">
						<view class="dot" v-for="(item, index) in passwordDots" :key="index" :class="{ 'filled': item }"></view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showContactModal: false,
				phoneNumber: '18642589456',
				// showPaymentModal: false,
				// password: '',
				// passwordDots: [false, false, false, false, false, false],
				// isPasswordFocused: false,
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			contactService() {
				this.showContactModal = true;
			},
			closeContactModal() {
				this.showContactModal = false;
			},
			copyPhoneNumber() {
				uni.setClipboardData({
					data: this.phoneNumber,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
						this.closeContactModal();
					}
				});
			},
			placeOrder() {
				console.log('立即下单');
			},
			// openPaymentModal() {
			// 	this.showPaymentModal = true;
			// },
			// closePaymentModal() {
			// 	this.showPaymentModal = false;
			// 	// 重置密码输入
			// 	this.password = '';
			// 	this.passwordDots = [false, false, false, false, false, false];
			// 	this.isPasswordFocused = false;
			// },
			// onPasswordInput(e) {
			// 	const value = e.detail.value;
			// 	this.password = value;
			// 	// 更新密码点显示
			// 	this.updatePasswordDots(value);
			// },
			// onPasswordFocus() {
			// 	this.isPasswordFocused = true;
			// },
			// onPasswordBlur() {
			// 	this.isPasswordFocused = false;
			// },
			// focusPassword() {
			// 	this.isPasswordFocused = true;
			// 	// 强制聚焦到输入框
			// 	this.$nextTick(() => {
			// 		const input = this.$refs.passwordInput;
			// 		if (input) {
			// 			input.focus();
			// 		}
			// 	});
			// },
			// updatePasswordDots(password) {
			// 	this.passwordDots = [];
			// 	for (let i = 0; i < 6; i++) {
			// 		this.passwordDots.push(i < password.length);
			// 	}
			// },
			// 跳转到车辆添加页面
			goToAddVehicle() {
				uni.navigateTo({
					url: '/index-item/AddVehicle/index'
				});
			},
			// 跳转到优惠券页面
			goToCouponCenter() {
				uni.navigateTo({
					url: '/index-item/CouponCenter/index'
				});
			},
			// 提交订单
			submitOrder() {
				uni.navigateTo({
					url: '/index-item/OrderDetail/index'
				});
			}
		}
	}
</script>

<style>
	.page {
		background-color: #f5f6fa;
		min-height: 100vh;
		position: relative;
		padding-bottom: 120rpx;
	}
	
	/* 导航栏 */
	.navbar {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.navbar-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 24rpx;
	}
	
	.back-button {
		position: absolute;
		left: 24rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.navbar-title {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		width: 100%;
	}
	
	/* 蓝色背景 */
	.blue-background {
		position: absolute;
		top: 88rpx;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(120deg, #1f78ff 0%, #2f89ff 100%);
	}
	
	/* 主内容容器 */
	.main-content {
		position: absolute;
		top: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 94%;
		max-width: 750rpx;
		z-index: 10;
	}
	
	/* 进度条背景 */
	.progress-background {
		position: relative;
		width: 100%;
		height: 240rpx;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	}
	
	.progress-bg-image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.progress-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #ffffff;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 20rpx;
	}
	
	.progress-steps {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: -20rpx;
	}
	
	.progress-divider {
		position: absolute;
		bottom: 0;
		left: 5%;
		width: 90%;
		height: 5rpx;
		background: #f8f8f8;
		z-index: 3;
	}
	
	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.step-circle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8rpx;
	}
	
	.step-circle.blue {
		background: #1f78ff;
	}
	
	.step-circle.green {
		background: #4CAF50;
	}
	
	.step-circle.orange {
		background: #FF9800;
	}
	
	.step-text {
		color: #ffffff;
		font-size: 18rpx;
		font-weight: 600;
		text-align: center;
		line-height: 1.1;
		white-space: pre-line;
	}
	
	.step-line {
		width: 60rpx;
		height: 2rpx;
		margin: 0 20rpx;
		border: none;
		border-top: 1rpx dashed #cccccc;
		background: transparent;
		align-self: center;
	}
	
	/* 整体内容卡片 */
	.content-card {
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		overflow: hidden;
	}
	
	/* 商家信息 */
	.shop-info {
		padding: 30rpx 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.shop-header {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}
	
	.shop-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 14rpx;
	}
	
	.shop-name {
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.shop-address {
		color: #666666;
		font-size: 28rpx;
		margin-left: 50rpx;
	}
	
	/* 客户和车辆信息 */
	.customer-vehicle-info {
		padding: 30rpx 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.info-row {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		min-height: 60rpx;
		
	}
	
	.info-row:last-child {
		border-bottom: none;
	}
	
	.info-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 14rpx;
	}
	
	.info-label {
		color: #333333;
		font-size: 30rpx;
		margin-top: 1;
		flex: 1;
	}
	
	.info-value {
		color: #666666;
		font-size: 30rpx;
	}
	
	.arrow-icon {
		width: 26rpx;
		height: 26rpx;
		margin-left: 14rpx;
	}
	
	/* 服务产品 */
	.service-products {
		padding: 30rpx 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.section-title {
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.product-count {
		color: #666666;
		font-size: 26rpx;
	}
	
	.count-number {
		color: #1f78ff;
		font-weight: 600;
	}
	
	.product-item {
		display: flex;
		align-items: center;
		
		padding: 16rpx 0;
		border-top: 1rpx solid #f0f0f0;
		min-height: 60rpx;
	}
	
	.product-name {
		color: #333333;
		font-size: 30rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	
	.product-price {
		color: #FF6B35;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 20rpx;
	}
	
	/* 代金券/优惠券 */
	.coupon-section {
		padding: 30rpx 24rpx;
	}
	
	.coupon-row {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		min-height: 60rpx;
	}
	
	.coupon-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 14rpx;
	}
	
	.coupon-label {
		color: #333333;
		font-size: 30rpx;
		flex: 1;
	}
	
	.coupon-discount {
		color: #FF6B35;
		font-size: 30rpx;
		font-weight: 600;
		margin-right: 14rpx;
	}
	
	/* 底部操作栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		padding: 20rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
		z-index: 20;
	}
	
	.contact-service {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-right: auto;
	}
	
	.service-icon {
		width: 32rpx;
		height: 32rpx;
	}
	
	.service-text {
		color: #666666;
		font-size: 24rpx;
	}
	
	.total-amount {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}
	
	.total-label {
		color: #333333;
		font-size: 28rpx;
	}
	
	.total-price {
		color: #FF9800;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.submit-button {
		background: #1f78ff;
		border-radius: 40rpx;
		padding: 20rpx 40rpx;
		margin-right: 40rpx;
	}
	
	.submit-text {
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
	}
	
	/* 联系客服弹出框 */
	.contact-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 1000;
	}
	
	.modal-content {
		width: 100%;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.phone-section {
		padding: 30rpx 20rpx;
		text-align: center;
		background: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.phone-number {
		color: #333333;
		font-size: 30rpx;
		font-weight: normal;
	}
	
	.divider {
		height: 1rpx;
		background: #f0f0f0;
		margin: 0;
	}
	
	.copy-section {
		padding: 30rpx 20rpx;
		text-align: center;
		background: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.copy-text {
		color: #333333;
		font-size: 30rpx;
		font-weight: normal;
	}
	
	.cancel-section {
		padding: 30rpx 20rpx;
		text-align: center;
		background: #ffffff;
	}
	
	.cancel-text {
		color: #333333;
		font-size: 30rpx;
		font-weight: normal;
	}
	
	/* 支付密码输入弹出框 - 已注释 */
	/* .payment-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.payment-content {
		width: 90%;
		max-width: 600rpx;
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.2);
	}
	
	.payment-header {
		position: relative;
		padding: 40rpx 30rpx 30rpx;
		text-align: center;
	}
	
	.close-btn {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.close-icon {
		color: #999999;
		font-size: 36rpx;
		font-weight: normal;
	}
	
	.payment-title {
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.payment-details {
		padding: 30rpx;
		text-align: center;
	}
	
	.platform-name {
		color: #666666;
		font-size: 28rpx;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.payment-amount {
		color: #333333;
		font-size: 48rpx;
		font-weight: 600;
	}
	
	.payment-divider {
		height: 1rpx;
		background: #f0f0f0;
		margin: 0 30rpx;
	}
	
	.payment-method {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.method-label {
		color: #333333;
		font-size: 30rpx;
		line-height: 1;
	}
	
	.method-option {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.method-text {
		color: #333333;
		font-size: 30rpx;
		line-height: 1;
	}
	
	.arrow-icon {
		color: #999999;
		font-size: 30rpx;
		line-height: 1;
	}
	
	.password-input {
		padding: 40rpx 30rpx 50rpx;
		display: flex;
		justify-content: center;
		position: relative;
	}
	
	.password-field {
		position: absolute;
		top: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 60rpx;
		opacity: 0;
		z-index: 10;
		font-size: 0;
		border: none;
		outline: none;
		background: transparent;
		color: transparent;
	}
	
	.password-dots {
		display: flex;
		gap: 20rpx;
		pointer-events: auto;
	}
	
	.dot {
		width: 60rpx;
		height: 60rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: #ffffff;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.dot.filled::after {
		content: '';
		width: 16rpx;
		height: 16rpx;
		background: #333333;
		border-radius: 50%;
		position: absolute;
	}
	*/
</style>